<template>
<div>
    <el-card>
      <h3>商品详情</h3>
      <el-form ref="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="product.name"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="product.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="selectO" placeholder="请选择一级品类">
            <el-option selected key="555" label="12" value="aa"></el-option>
              <el-option v-for="item in selectOne" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select v-if="selectO !== ''" v-model="selectT" placeholder="请选择二级品类">
            <el-option v-for="item in selectTwo" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input type='number' v-model="product.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input type='number' v-model="product.stock">
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload
            action="/api/manage/product/upload.do"
            :on-success="handleSuccess"
            list-type="picture"
            :auto-upload="true"
            name="upload_file"
            :limit="2"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品详情">
          <quill-editor v-model="product.detail" ref="myQuillEditor"></quill-editor>
        </el-form-item>
      </el-form>
      <el-button @click='productEdit' >提交</el-button>
    </el-card>
</div>
</template>

<script>
import { productInfo } from "../util/http";
import { productType } from "../util/http";
import { productEdit } from "../util/http";
export default {
 // 组件名称
 name: 'demo',
 // 组件参数 接收来自父组件的数据
 props: [],
 components: {},
 data () {
 return {
    product:{},
    fileList:[],
    selectOne: [],
    selectO: '',
    selectTwo: [],
    selectT: "",

}
 },
 computed: {},
 watch: {},
 methods: {
    async getProduct() {
      const { data: res } = await productInfo(
        `/api/manage/product/detail.do?productId=${this.$store.state.productCheck.id}`
      );
      if (res.status !== 0) return this.$message.error("获取数据失败");
      this.$message.success("获取数据成功");
      this.product = res.data;
      this.fileList.push({'url':res.data.imageHost+res.data.mainImage})
      this.selectO=this.product.parentCategoryId
      this.selectT=this.product.categoryId
      // 获取二级下拉菜单
      const { data: resSelectTwo } = await productType(
        `/api/manage/category/get_category.do?categoryId=${this.product.parentCategoryId}`
      );
      this.selectTwo = resSelectTwo.data;
      // console.log(this.selectTwo)
    },
    async getSelectOne() {
      const { data: res } = await productType(
        `/api/manage/category/get_category.do?categoryId=0`
      );
      if (res.status !== 0) return this.$message.error("获取数据失败");
      this.$message.success("获取数据成功");
      this.selectOne = res.data;
    },
    handleSuccess(res){
        this.fileList = []
        this.fileList.push({'url':res.data.url})
        this.product.subImages = res.data.uri
    },
    async productEdit(){
    // /manage/product/save.do?
    // categoryId=${this.product.categoryId}&
    // name=${this.product.name}&
    // subtitle=${this.product.subtitle}&
    // subImages=${this.product.subImages}&
    // detail=${this.product.detail}&
    // price=${this.product.price}&
    // stock=${this.product.stock}&
    // status=1&
    // id=${this.product.id}
        const {data:res} = await productEdit(`/api/manage/product/save.do?categoryId=${this.selectT}&name=${this.product.name}&subtitle=${this.product.subtitle}&subImages=${this.product.subImages}&detail=${this.product.detail}&price=${this.product.price}&stock=${this.product.stock}&status=1&id=${this.product.id}`)
        if( res.status !== 0 ) this.$message.error("更新产品失败");
        this.$message.success("更新产品成功");
        this.$router.push("/icon");
    }
},
 beforeCreate () {
 },
 created () {
 },
 beforeMount () {
 },
 mounted () {
    this.getProduct();
    this.getSelectOne();
 },
}
</script> 
<style scoped>

</style>
